<template>
  <div class="contianer">
    <!-- 路径导航：面包屑 -->
    <el-breadcrumb separator-class="el-icon-arrow-right" class="guide">
      <el-breadcrumb-item :to="{ path: '/hotel' }">酒店</el-breadcrumb-item>
      <!-- 路由跳转未添加 -->
      <el-breadcrumb-item :to="{ path: '/hotel' }"
        >{{ hotelInfo.real_city }}酒店</el-breadcrumb-item
      >
      <el-breadcrumb-item>酒店名称</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 酒店信息-->
    <div class="hotelInfo">
      <h4 class="hotelName">{{ hotelInfo.name }}</h4>
      <div>{{ hotelInfo.alias }}</div>
      <div>
        <i class="el-icon-location"></i>
        {{ hotelInfo.address }}
      </div>
    </div>
    <!--酒店房型图片展示  -->
    <div class="hotelPicture">
      <el-row :gutter="20">
        <el-col :span="15">
          <div class="preview">
            <el-image
              :src="hotelPicL"
              style="width: 640px; height: 354px"
              :preview-src-list="hotelPic"
            >
            </el-image>
          </div>
        </el-col>
        <el-col :span="9">
          <el-row
            type="flex"
            justify="space-between"
            flex-wrap:wrap
            class="sm-pic"
          >
            <el-col
              :span="12"
              class="sm-pic-single"
              v-for="(pic, index) in hotelPic"
              :key="index"
              @click.native="checkPic(index)"
            >
              <div>
                <img :src="pic" alt="" />
              </div>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </div>
    <!--房源信息  -->
    <hotelResource :hotelResourceInfo="hotelInfo.products" />
    <!-- 交通模块 -->
    <hotelTraffic v-if="hotelInfo.real_city" :data="hotelInfo" />
    <!-- 酒店房源内部基本信息 -->
    <hotelInfo v-if="hotelInfo.stars" :data="hotelInfo" />
    <!-- 酒店评论模块、 -->
    <hotelComment v-if="hotelInfo.stars" :data="hotelInfo" />
    <!-- 酒店评论单个、 -->
    <commentItem />
  </div>
</template>

<script>
import { myRequest } from "@/utils/http.js";
import hotelResource from "@/components/hotel/hotelResource.vue";
import hotelTraffic from "@/components/hotel/hotelTraffic.vue";
import hotelInfo from "@/components/hotel/hotelInfo.vue";
import hotelComment from "@/components/hotel/hotelComment.vue";
import commentItem from "@/components/hotel/commentItem.vue";
export default {
  components: {
    hotelResource,
    hotelTraffic,
    hotelInfo,
    hotelComment,
    commentItem,
  },
  data() {
    return {
      // 酒店详情信息
      hotelInfo: {},
      // 酒店小图片展示
      hotelPic: [
        "http://157.122.54.189:9093/images/hotel-pics/1.jpeg",
        "http://157.122.54.189:9093/images/hotel-pics/2.jpeg",
        "http://157.122.54.189:9093/images/hotel-pics/3.jpeg",
        "http://157.122.54.189:9093/images/hotel-pics/4.jpeg",
        "http://157.122.54.189:9093/images/hotel-pics/5.jpeg",
        "http://157.122.54.189:9093/images/hotel-pics/6.jpeg",
      ],
      // 酒店大图片预览
      hotelPicL: "http://157.122.54.189:9093/images/hotel-pics/1.jpeg",
    };
  },

  created() {
    //   进页面，就获取酒店详情数据、并渲染
    this.$axios({
      method: "get",
      url: "/hotels",
      params: { id: this.$route.query.city },
    }).then((res) => {
      console.log(res);
      this.hotelInfo = res.data.data[0];
    });
  },
  methods: {
    //点击切换图片业务逻辑
    checkPic(index) {
      console.log(1);
      this.hotelPicL = this.hotelPic[index];
    },
  },
};
</script>

<style lang="less" scoped>
.contianer {
  width: 1000px;
  margin: 20px auto;
  .guide {
    padding: 0px 0 20px 0;
  }
  .hotelInfo {
    margin-bottom: 20px;
    color: #666;
    font-size: 14px;
    .hotelName {
      color: #333;
      font-weight: 400;
      font-size: x-large;
    }
    .el-icon-location {
      font-size: large;
    }
  }
  .hotelPicture {
    margin: 40px 0;
    .preview {
      width: 640px;
      height: 354px;
    }
    .sm-pic {
      flex-wrap: wrap;
      margin-left: 30px;

      .sm-pic-single {
        width: 160px;
        height: 110px;
        margin-bottom: 12px;
        box-sizing: border-box;
        cursor: pointer;
        img {
          width: 100%;
        }
      }
    }
  }
}
</style>